<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        td{padding: 0;}
        input{width: 100%;height: 100%;border: none;margin: 0;}
    </style>
</head>
<body>
    <table border="1" width="800" align="center">
        <thead>
            <tr>
                <td><input type="button" value="学号" id="btn1"></td>
                <td><input type="button" value="姓名" id="btn2"></td>
                <td><input type="button" value="语文" id="btn3"></td>
                <td><input type="button" value="数学" id="btn4"></td>
                <td><input type="button" value="英语" id="btn5"></td>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>

</body>
<script>
    // 准备数据
    var data = [{
        id:1,
        name:"王二",
        chinese:89,
        math:69,
        english:88
    },{
        id:2,
        name:"张三",
        chinese:58,
        math:56,
        english:78
    },{
        id:3,
        name:"李四",
        chinese:81,
        math:79,
        english:82
    },{
        id:4,
        name:"赵五",
        chinese:72,
        math:47,
        english:74
    },{
        id:5,
        name:"钱六",
        chinese:87,
        math:81,
        english:69
    }];

    // 选择元素
    var otb = document.getElementById("tb");
    var obtn1 = document.getElementById("btn1");
    var obtn2 = document.getElementById("btn2");
    var obtn3 = document.getElementById("btn3");
    var obtn4 = document.getElementById("btn4");
    var obtn5 = document.getElementById("btn5");

    // 初始渲染页面
    display(otb, data);

    // 学号排序
    obtn1.onclick = function(){
        var res = sort(data,"id");
        display(otb, res);
    }
    // 姓名排序：中文排序规则为：u编码
    obtn2.onclick = function(){
        var res = sort(data,"name");
        display(otb, res);
    }
    // 语文排序
    obtn3.onclick = function(){
        var res = sort(data,"chinese");
        display(otb, res);
    }
    // 数学排序
    obtn4.onclick = function(){
        var res = sort(data,"math");
        display(otb, res);
    }
    // 英语排序
    obtn5.onclick = function(){
        var res = sort(data,"english");
        display(otb, res);
    }

    // 渲染页面功能：
        // 参数1：页面容器；
        // 参数2：渲染数据
    function display(cont, arr){
        var str = "";
        arr.forEach(function(val){
            str += "<tr><td>"+ val.id +"</td><td>"+ val.name +"</td><td>"+ val.chinese +"</td><td>"+ val.math +"</td><td>"+ val.english +"</td></tr>";
        });
        cont.innerHTML = str;
    }

    // 排序功能：
        // 参数1：要排序数据；
        // 参数2：排序字段
    function sort(arr, col){
        // 深拷贝数组
        arr = arr.slice(0);
        // 选择排序        
        for(var i=0;i<arr.length-1;i++){
            var ls = arr[i];
            var lsIndex = i;
            for(var j=i+1;j<arr.length;j++){
                if(ls[col] > arr[j][col]){
                    ls = arr[j];
                    lsIndex = j;
                }
            }
            arr[lsIndex] = arr[i];
            arr[i] = ls;
        }
        // 返回新数组
        return arr;
    }

</script>
</html>